<template>
  <div class="test-status-monitor">
    <div class="test-status-monitor-top">
      <div class="test-status-monitor-top-left">
        <span class="title-font">任务执行状态分布</span>
        <div id="pieChart" class="pieChart" />
      </div>
      <div class="test-status-monitor-top-right">
        <div class="timeLine-top">
          <div class="timeLine-tab">
            <span
              v-for="(item, index) in tabs"
              :key="index"
              class="timeLine-sort"
              :class="{ active: activeIndex === index }"
              @click="setActive(index)"
            >
              {{ item }}
            </span>
          </div>
          <div class="timeLine-prompt">
            <div class="green-block" />
            <div>执行中</div>
            <div class="blue-block" />
            <div>已完成</div>
          </div>
        </div>
        <div class="timeLine-container">
          <div
            v-for="item in timeLineData"
            :key="item.name"
            class="timeLine-item"
          >
            <div class="timeLine-name">{{ item.name }}</div>
            <div class="timeLine-content">
              <el-steps :active="item.active" simple>
                <el-step title="参数下发" icon="iconfont icon-fasong" />
                <el-step title="建链" icon="iconfont icon-charulianjie" />
                <el-step title="连通性测试" icon="iconfont icon-ceshi" />
                <el-step
                  title="文件传输"
                  icon="iconfont icon-wenjianchuanshu"
                />
                <el-step title="断链" icon="iconfont icon-a-14Jduanlian" />
              </el-steps>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="test-status-monitor-bottom">
      <span class="title-font">已完成任务</span>

      <div class="display-table-content">
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          :header-cell-style="{
            textAlign: 'center',
            background: '#013770',
            color: '#1adafb',
            fontSize: '#2rem',
            border: 'none',
          }"
          :cell-style="{
            textAlign: 'center',
            background: '#020e36',
            color: '#ffffff',
            border: 'none',
          }"
          height="38vh"
          style="width: 100%"
        >
          <el-table-column prop="taskName" label="任务名称" width="250" />
          <el-table-column prop="beginTime" label="开始时间" width="200" />
          <el-table-column prop="endTime" label="结束时间" width="200" />
          <el-table-column prop="execTime" label="执行时间" width="140" />
          <el-table-column prop="execStatus" label="执行状态" width="140" />
          <el-table-column prop="sendPackNum" label="发送包数" />
          <el-table-column prop="recvPackNum" label="接收包数" />
          <el-table-column
            prop="sendDataSize"
            label="发送数据大小"
            width="140"
          />
          <el-table-column
            prop="recvDataSize"
            label="接收数据大小"
            width="140"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import GuideTitle from '@/components/GuideTitle'
import { queryByPage } from '@/api/testStatusMonitor'
export default {
  name: 'TestStatusMonitor',
  components: { GuideTitle },
  props: {},
  data() {
    return {
      active: 4, // 当前激活的步骤
      tabs: ['默认排序', '时间从近到远', '时间从远到近'], // Tab选项
      activeIndex: 0, // 记录当前选中的索引
      tableData: [
        {
          id: '1313123123123', // id
          taskName: '111', // 任务名称
          beginTime: '开始时间', // 开始时间
          endTime: '结束时间', // 结束时间
          execTime: '执行时间', // 执行时间
          execStatus: '执行状态', // 执行状态
          sendPackNum: 1, // 发送包数
          recvPackNum: 11, // 接收包数
          sendDataSize: '1', // 发送数据大小
          recvDataSize: '1' // 接收数据大小
        }
      ],
      guideList: [
        {
          id: 'ModelChoice',
          name: '模块选择',
          icon: 'fa fa-list'
        },
        {
          id: 'ListChoice',
          name: '功能检测',
          icon: 'fa fa-search-plus'
        }
      ],
      timeLineData: [
        {
          name: 'Ku散射设备0424测试计划',
          active: 0
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 1
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 2
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 3
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 4
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 4
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 4
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 4
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 4
        },
        {
          name: 'Ku散射设备0424测试计划',
          active: 4
        }
      ]
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })

    this.queryByPage()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    // 分页查询测试任务状态列表
    queryByPage() {
      queryByPage()
        .then((res) => {
          console.log('resres', res)

          const code = res.code
          if (code == 200) {
            this.$message.success('分页查询测试任务状态列表成功')
          } else {
            this.$message.error('分页查询测试任务状态列表失败')
          }
          if (res.rows != null) {
            this.tableData = res.rows
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    setActive(index) {
      this.activeIndex = index // 更新当前选中的索引
    },
    // 获取步骤序列号
    getStepNumber(step) {
      // 返回格式化的步骤序号，例如 01, 02, 03
      return String(step).padStart(2, '0')
    },
    initChart() {
      const chartDom = document.getElementById('pieChart')
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '20%', // 设置图例的顶部间距
          right: '5%', // 设置图例距离右边的间距
          orient: 'vertical', // 竖直排列
          textStyle: {
            color: '#fff' // 设置图例文字颜色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {},
            labelLine: {
              show: false
            },
            data: [
              { value: 100, name: '等待状态' },
              { value: 700, name: '完成状态' },
              { value: 10, name: '就绪状态' },
              { value: 10, name: '运动状态' },
              { value: 30, name: '暂停状态' },
              { value: 10, name: '错误状态' },
              { value: 50, name: '阻塞状态' },
              { value: 10, name: '终止状态' }
            ],
            // 设置每个扇区的颜色
            itemStyle: {
              color: function(params) {
                const colors = [
                  '#d89aff', // 等待状态
                  '#26d4a1', // 完成状态
                  '#19b1fc', // 就绪状态
                  '#77c244', // 运动状态
                  '#f5cc6e', // 暂停状态
                  '#4ec3e8', // 错误状态
                  '#ff9899', // 阻塞状态
                  '#fd2d3f' // 终止状态
                ]
                return colors[params.dataIndex] // 根据数据项索引返回颜色
              }
            },
            center: ['35%', '50%'] // 将饼状图的水平位置调整为35%，垂直位置保持在50%
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.test-status-monitor {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  .test-status-monitor-top {
    flex: 1;
    display: flex;
    flex-direction: row;
    .test-status-monitor-top-left {
      width: 550px;
      background: url("~@/assets/images/statusMonitor/systemLoadBg.png")
        no-repeat center center;
      background-size: 100% 100%;
      padding: 10px;
      border-radius: 10px;
      .pieChart {
        height: 95%;
      }
    }
    .test-status-monitor-top-right {
      flex: 2;
      background: url("~@/assets/images/statusMonitor/systemLoadBg.png")
        no-repeat center center;
      background-size: 100% 100%;
      margin-left: 10px;
      padding: 10px;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      .timeLine-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        .timeLine-tab {
          .timeLine-sort {
            margin-right: 20px;
            cursor: pointer;
            color: #999; /* 默认字体颜色为灰色 */
          }
          .timeLine-sort.active {
            color: white; /* 被选中的字体颜色为白色 */
            // background-color: #333; /* 选中时背景色（可选） */
          }
          .timeLine-sort:hover {
            color: #fff; /* 悬停时的字体颜色 */
            // background-color: #444; /* 悬停时的背景色 */
          }
        }
        .timeLine-prompt {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          .green-block {
            width: 10px;
            height: 10px;
            background-color: #28faaa;
            margin-left: 20px;
            margin-right: 5px;
          }
          .blue-block {
            width: 10px;
            height: 10px;
            background-color: #35d0fb;
            margin-left: 20px;
            margin-right: 5px;
          }
        }
      }
      .timeLine-container {
        margin-top: 10px;
        height: 36vh;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .timeLine-item {
          display: flex;
          flex-direction: row;
          padding: 5px 0 5px 0;
          border-top: 1px solid #00e4ff;
          border-bottom: 1px solid #00e4ff;

          .timeLine-name {
            width: 250px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #041e4f;
            color: #00e4ff;
            border-radius: 4px;
          }
          .timeLine-content {
            flex: 1;
            margin-left: 20px;
          }
        }
      }
      .timeLine-container::-webkit-scrollbar {
        width: 6px;
      }
      .timeLine-container::-webkit-scrollbar-thumb {
        box-shadow: 0px 0.0625rem 0.1875rem #013770 inset;
        border-radius: 3px; /*滚动条的背景区域的圆角*/
        background-color: #013770;
      }
      .timeLine-container::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0px 0.0625rem 0.1875rem #071e4a;
        /*滚动条的背景区域的圆角*/
        background-color: #071e4a;
      }
    }
  }
  .test-status-monitor-bottom {
    flex: 1;
    background: url("~@/assets/images/statusMonitor/systemLoadBg.png") no-repeat
      center center;
    background-size: 100% 100%;
    margin-top: 10px;
    padding: 10px;
    .display-table-content {
      padding: 10px 10px 0 10px;
    }
  }
  .title-font {
    font-weight: bold;
    background: linear-gradient(to bottom, #f0f0f0, #00e4ff);
    -webkit-background-clip: text; /* 使用背景作为文字填充 */
    -webkit-text-fill-color: transparent; /* 隐藏文字的实际颜色 */ /* 渐变色从红色到蓝色 */
    letter-spacing: 0.15em; /* 设置字间距为0.2em，可以根据需要调整 */
  }
}
</style>
